import {designPage} from "plain-ui-composition";
import {Menu, menus, MenuType} from "./menu";
import {AppNavigator} from "../natigator/app-navigator";
import {PlIcon, PlScroll} from "plain-ui";
import {classnames} from "plain-utils/dom/classnames";

export const DocHomeMenu = designPage(() => {

    const allCharPattern = /^[a-zA-Z]+$/

    const renderMenuLink = (menu: Menu, key: number) => {
        const active = menu.path === AppNavigator.route.path
        return <li key={key}
                   class={classnames([
                       'pl-text-primary',
                       'doc-home-menu-link',
                       {'doc-home-menu-link-active': active}
                   ])}
                   onClick={() => AppNavigator.go((menu.path!))}>
            {active && <PlIcon icon="el-icon-s-promotion"/>}
            <span class={!!menu.name && allCharPattern.test(menu.name) ? 'all-char' : ''}>{menu.name}</span>
            <span class="doc-home-menu-tip">{menu.tip}</span>
        </li>
    }

    return () => (
        <section class="doc-home-menu">
            <PlScroll fitHostWidth alwaysShowScrollbar>
                <ul class="doc-home-menu-list">
                    {menus.map((menu, menuIndex) => {
                        switch (menu.type) {
                            case MenuType.menu:
                                return renderMenuLink(menu, menuIndex)
                            case MenuType.group:
                                return (
                                    <div key={menuIndex}>
                                        <li class="doc-home-menu-group pl-text-primary">
                                            {/*<PlIcon icon="el-icon-list"/>*/}
                                            <span>{menu.name}</span>
                                        </li>
                                        <ul>
                                            {menu.menus!.map((subMenu, subIndex) => renderMenuLink(subMenu, subIndex))}
                                        </ul>
                                    </div>
                                )
                        }
                    })}
                </ul>
            </PlScroll>
        </section>
    )
})
